<template>
  <el-form ref="form" :model="form" label-width="80px">
    <el-form-item label="内容">
      <div style="border: 1px solid #dcdfe6; border-radius: 4px; z-index: 999">
        <!-- 工具栏 -->
        <Toolbar
          style="border-bottom: 1px solid #ccc"
          :editor="editor"
          :defaultConfig="toolbarConfig"
        />
        <!-- 编辑器 -->
        <Editor
          style="height: 600px; overflow-y: hidden"
          :defaultConfig="editorConfig"
          :defaultContent="defaultContent"
          v-model="html"
          @onChange="onChange"
          @onCreated="onCreated"
        />
      </div>
    </el-form-item>
  </el-form>
</template>

<script>
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import "@wangeditor/editor/dist/css/style.css";
import { uploadAttachmentApi } from "@/api/modules/common.api";
import { Message } from "element-ui";

export default {
  props: ["content"],
  components: {
    Editor,
    Toolbar,
  },
  data() {
    return {
      form: {
        content: "",
      },
      editor: null,
      html: "",
      toolbarConfig: {
        // toolbarKeys: [ /* 显示哪些菜单，如何排序、分组 */ ],
        // excludeKeys: [ /* 隐藏哪些菜单 */ ],
        excludeKeys: ["insertImage", "insertVideo"],
      },
      defaultContent: [
        {
          type: "paragraph",
          lineHeight: "1.5",
          children: [{ text: "", fontFamily: "仿宋", fontSize: "22px" }],
        },
      ],
      editorConfig: {
        placeholder: "请输入内容...",
        showLinkImg: false,
        MENU_CONF: {
          uploadImage: {
            server: uploadAttachmentApi,
            maxFileSize: 10 * 1024 * 1024, // 1M

            maxNumberOfFiles: 100,
            allowedFileTypes: [],
            fieldName: "file",
            headers: {
              Authorization: `Bearer ${localStorage.getItem("token")}`,
            },
            meta: {
              objType: 2,
            },
            timeout: 5 * 1000,
            onFailed(file, res, error) {
              // TS 语法
              // onFailed(file, res) {           // JS 语法
              console.log(`${file.name} 上传失败`, res);
              console.log("error", error);
              Message.error("上传失败，图片不能超过4M");
            },
            onError(file, err, res) {
              // TS 语法
              // onError(file, err, res) {               // JS 语法
              console.log(`${file.name} 上传出错`, err, res);
              Message.error("上传失败，图片不能超过4M");
            },
          },
          // 配置上传视频（同上传图片）
          uploadVideo: {
            // 自定义上传图片 方法
            // customUpload: this.uploadImg,
            // 自定义插入图片 方法
            // customInsert: this.insertImg,
            //server必须要配置正确,我这里因为上传图片有点特殊，在下面方法配置了，所以此处不用配置地址
            server: uploadAttachmentApi,

            maxFileSize: 500 * 1024 * 1024, // 1M
            // maxFileSize: 1 * 1024 * 1024, // 1M
            // 最多可上传几个文件，默认为 100
            maxNumberOfFiles: 100,
            // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
            allowedFileTypes: [],
            // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
            fieldName: "file",
            headers: {
              Authorization: `Bearer ${localStorage.getItem("token")}`,
            },
            meta: {
              objType: 1
            },
            //     headers: {
            //       Authorization: `Bearer ${ localStorage.getItem("token") }`,
            //     },
            // meta: {
            //   //官网中把token放到了这里，但是请求的时候会看不到token
            // },
            // headers: {
            //   //所以token放这里
            //   // token: window.sessionStorage.token,
            // },
            // 将 meta 拼接到 url 参数中，默认 false
            metaWithUrl: false,
            // 跨域是否传递 cookie ，默认为 false
            withCredentials: false,
            // 超时时间，默认为 10 秒
            timeout: 5 * 1000, // 5 秒

            // 单个文件上传成功之后
            // onSuccess(file, res) {
            //   console.log("onSuccess","onSuccess")
            //   console.log(`${ file.name } 上传成功`, res)
            // },

            // 单个文件上传失败
            onFailed(file, res, error) {
              // TS 语法
              // onFailed(file, res) {           // JS 语法
              console.log(`${file.name} 上传失败`, res);
              console.log("error", error);
            },

            // 上传错误，或者触发 timeout 超时
            onError(file, err) {
              if(err.include('maximum')){
                Message.error("上传失败,文件过大");
              }else{
                Message.error("上传失败");
              }
            },
          },
        },
      },
    };
  },
  watch: {
    content(data) {
      this.form.content = data.content;
      this.html = data.content;
    },
    deep: true,
  },
  methods: {
    getContent() {
      return this.form.content;
    },
    onCreated(editor) {
      this.editor = Object.seal(editor); // 【注意】一定要用 Object.seal() 否则会报错
    },
    onChange(editor) {
      this.form.content = editor.getHtml();
    },
  },
};
</script>
<style scoped>
.editor-box {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  z-index: 999;
}
</style>
